<template>
  <div id="app" :style="{'background-image': 'linear-gradient(to top, '+lightBg+' 0%, '+darkBg+' 100%)'}">
    <canvas id='id1'></canvas>
    <el-image :src="bgImg" lazy :fit="fill" style="position: absolute;width: 100%;height: 100%" v-if="bgImg"></el-image>
    <div class="bg-block">
      <div style="height: 100%;width: 50%;position: relative;display: inline-flex" v-if="bodyImg">
        <el-image :src="bodyImg" lazy fit="scale-down" style="z-index: 50"></el-image>
      </div>
      <div class="loginFormBlock">
        <div class="longinTitle" :style="{ 'color': titleColor }">用户登录</div>
        <div class="loginFormDom" >
          <el-form :model="loginForm" ref="loginForm" :rules="loginRules" @keyup.enter.native="handleLogin">
            <el-form-item prop="username">
              <div class="loginFormItem" :style="{'border-bottom':userNameBorder==true?'2px solid '+borderBottom:'2px solid #ebebeb'}">
                <img src="../../assets/login/icon/user1.png" style="max-width: 100%;max-height: 100%;margin-left: 5px" v-show="!userNameBorder"/>
                <img :src="userIcon" style="max-width: 100%;max-height: 100%;margin-left: 5px" v-show="userNameBorder"/>
                <el-input v-model="loginForm.username" placeholder="请输入用户名" @focus="showBorderLeft('userNameBorder')" @blur="userNameBorder=false"/>
                <i class="el-icon-error" @click="clear" style="font-size: 18px"></i>
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <div class="loginFormItem" :style="{'border-bottom':passwordBorder==true?'2px solid '+borderBottom:'2px solid #ebebeb'}">
                <img src="../../assets/login/icon/mima1.png" style="max-width: 100%;max-height: 100%;margin-left: 5px" v-show="!passwordBorder"/>
                <img :src="mimaIcon" style="max-width: 100%;max-height: 100%;margin-left: 5px" v-show="passwordBorder"/>
                <el-input v-model="loginForm.password" :type="showPassword?'':'password'" placeholder="请输入密码" @focus="showBorderLeft('passwordBorder')" @blur="passwordBorder=false"/>
                <svg-icon :icon-class="showPassword==false? 'eye' : 'eye-open'" @click="showPassword=!showPassword" style="color: #ebebeb"/>
              </div>
            </el-form-item>
            <el-form-item prop="verificationCode">
              <div class="loginFormItem" :style="{'border-bottom':codeBorder==true?'2px solid '+borderBottom:'2px solid #ebebeb'}">
                <img src="../../assets/login/icon/code1.png" style="max-width: 100%;max-height: 100%;margin-left: 5px" v-show="!codeBorder"/>
                <img :src="codeIcon" style="max-width: 100%;max-height: 100%;margin-left: 5px;" v-show="codeBorder"/>
                <el-input v-model="loginForm.verificationCode" placeholder="请输入验证码" @focus="showBorderLeft('codeBorder')" @blur="codeBorder=false"/>
                <img :src="url" style="max-width: 100px;max-height: 100%" @click="initData"/>
              </div>
            </el-form-item>
            <el-form-item prop="agree">
              <div class="checkBoxItem">
                <el-checkbox v-model='loginForm.agree' class="checkboxStyle">我已审慎阅读并同意</el-checkbox>
                <span class="agreementItem" v-for="(item,index) in loginAgreementList" :key="index" @click="showAgreementDetail(item)">《{{ item.title }}》</span>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="loginFormBtn" @click="handleLogin">
          <div class="login-btn" :style="{ background:btnBg}">登录</div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="showContentDialog"
      width="50%"
      center>
      <div v-html="agreementHtml" style="margin: 0 20px;"></div>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showContentDialog = false">关  闭</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import {bossLogin, initializationLogin, getLoginAgreement, getAgentAgreement} from '@/api/getData'
// import bgImg_cy from '../../assets/login/img-chongyang-bg.png'
// import bgImg_cy_body from '../../assets/login/img-chongyang-body.png'

export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
      } else {
        callback()
      }
    }
    return {
      encryptedString: '',
      url: '',
      loginForm: {
        username: '',
        password: '',
        verificationCode: '',
        agree: false,
      },
      loginRules: {
        username: [{required: true, trigger: 'blur', message: '请输入用户名'}],
        password: [{required: true, trigger: 'blur', validator: validatePass}],
        verificationCode: [{required: true, trigger: 'blur', message: '请输入图片验证码'}]
      },
      loading: false,
      pwdType: 'password',
      redirect: undefined,
      activeName: 'first',
      userNameBorder: false,
      passwordBorder: false,
      codeBorder: false,
      showPassword: false,
      bgColorList: [
        // {
        //   min: 1603555200000, max: 1603641600000, light: '#FFF8DC', dark: '#e6b980', border: '#D2B48C', btn: 'linear-gradient(to top, #e6b980 0%, #eacda3 100%)', title: '#D2B48C', bgImg: require('../../assets/login/img-chongyang-bg.png'), bodyImg: require('../../assets/login/img-chongyang-body.png'),
        //   userIcon: require('../../assets/login/icon/user3.png'), mimaIcon: require('../../assets/login/icon/mima3.png'), codeIcon: require('../../assets/login/icon/code3.png'), fill: 'fill'
        // },
        // {
        //   min: 1603382400000, max: 1603468800000, light: '#2B91B2', dark: '#2B72A5', border: '#2B72A5', btn: 'linear-gradient(to top, #13547a 0%, #80d0c7 100%)', title: '#80d0c7', bgImg: require('../../assets/login/img-shuangjiang-bg.png'), bodyImg: require('../../assets/login/img-shuangjiang-body.png'),
        //   userIcon: require('../../assets/login/icon/user4.png'), mimaIcon: require('../../assets/login/icon/mima4.png'), codeIcon: require('../../assets/login/icon/code4.png'), fill: 'cover'
        // },
        // {
        //   min: 1603468800000, max: 1603555200000, light: '#061D33', dark: '#000080', border: '#0000FF', btn: 'linear-gradient(to top, #000080 0%, #061D33 100%)', title: '#fff', bgImg: require('../../assets/login/img-1024.png'), bodyImg: require('../../assets/login/img-1024-body.png'),
        //   userIcon: require('../../assets/login/icon/user2.png'), mimaIcon: require('../../assets/login/icon/mima2.png'), codeIcon: require('../../assets/login/icon/code2.png'), fill: 'cover'
        // },
        // {
        //   min: 1605974400000, max: 1606060800000, light: '#4b7cc5', dark: '#8FBBFC', border: '#8FBBFC', btn: 'linear-gradient(to top, #4b7cc5 0%, #80abd9 100%)', title: '#fff', bgImg: require('../../assets/login/img-xiaoxue-bg.png'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user6.png'), mimaIcon: require('../../assets/login/icon/mima6.png'), codeIcon: require('../../assets/login/icon/code6.png'), fill: 'cover'
        // },
        // {
        //   min: 1607270400000, max: 1607356800000, light: '#4b7cc5', dark: '#8FBBFC', border: '#8FBBFC', btn: 'linear-gradient(to top, #4b7cc5 0%, #80abd9 100%)', title: '#fff', bgImg: require('../../assets/login/img-daxue.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user6.png'), mimaIcon: require('../../assets/login/icon/mima6.png'), codeIcon: require('../../assets/login/icon/code6.png'), fill: 'cover'
        // },
        // {
        //   min: 1608480000000, max: 1608566400000, light: '#FFF8DC', dark: '#e6b980', border: '#D2B48C', btn: 'linear-gradient(to top, #e6b980 0%, #eacda3 100%)', title: '#D2B48C', bgImg: require('../../assets/login/img-dongzhi.png'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user3.png'), mimaIcon: require('../../assets/login/icon/mima3.png'), codeIcon: require('../../assets/login/icon/code3.png'), fill: 'cover'
        // },
        // {
        //   min: 1608825600000, max: 1608912000000, light: '#D30000', dark: '#B20D0D', border: '#E43328', btn: 'linear-gradient(to top, #5C0404 0%, #E43328 100%)', title: '#D30000', bgImg: require('../../assets/login/img-shengdan.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user7.png'), mimaIcon: require('../../assets/login/icon/mima7.png'), codeIcon: require('../../assets/login/icon/code7.png'), fill: 'cover'
        // },
        // {
        //   min: 1609430400000, max: 1609516800000, light: '#D30000', dark: '#B20D0D', border: '#E43328', btn: 'linear-gradient(to top, #5C0404 0%, #E43328 100%)', title: '#D30000', bgImg: require('../../assets/login/img-yuandan.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user7.png'), mimaIcon: require('../../assets/login/icon/mima7.png'), codeIcon: require('../../assets/login/icon/code7.png'), fill: 'cover'
        // },
      ],
      lightBg: '#9EC8FC',
      darkBg: '#000b61',
      borderBottom: '#005bea',
      btnBg: 'linear-gradient(to top, #005bea 0%, #00c6fb 100%)',
      titleColor: '#87CEFA',
      fill: 'cover',
      bgImg: require('../../assets/login/img-normal-bg.jpg'),
      // bodyImg: require('../../assets/login/img-bg.png'),
      bodyImg: require('../../assets/login/img-bg1.png'),
      userIcon: require('../../assets/login/icon/user2.png'),
      codeIcon: require('../../assets/login/icon/code2.png'),
      mimaIcon: require('../../assets/login/icon/mima2.png'),
      agreementHtml: '',
      showAgreementDialog: false,
      loginAgreementList: [],
      showContentDialog: false,
      title: '',
      themeInTime: false,
    }
  },

  mounted() {
    let current = new Date().getTime();
    this.bgColorList.map(item => {
      if (current > item.min && current < item.max) {
        this.lightBg = item.light;
        this.darkBg = item.dark;
        this.borderBottom = item.border;
        this.btnBg = item.btn;
        this.titleColor = item.title;
        this.bgImg = item.bgImg;
        this.bodyImg = item.bodyImg;
        this.userIcon = item.userIcon;
        this.codeIcon = item.codeIcon;
        this.mimaIcon = item.mimaIcon;
        this.fill = item.fill;
        this.themeInTime = true;
      }
    })
    this.initData()
    this.init()


  },
  methods: {
    init(){
      (function() {

        var regular_stars = [],
          falling_star;

        var R = Math.PI / 5;
        var G = 1.55;
        var TOTAL = 35;
        var SIZE = 3.8;
        var CURVE = 0.25;
        var ENERGY = 0.02;
        var FALLING_CHANCE = 0.1;

        var canvas = document.getElementById('id1');
        var cx = canvas.getContext('2d');
        // canvas.style.backgroundColor = '#000718';
        resizeViewport();

        function Star() {
          this.r = Math.random() * SIZE * SIZE + SIZE;
          this.rp = Math.PI / Math.random();
          this.rd = Math.random() * 2 - 1;
          this.c = Math.random() * (CURVE * 2 - CURVE) + CURVE;
          this.x = Math.random() * canvas.width;
          this.y = Math.random() * canvas.height;
          this.e = 0;
          this.d = false;
        }

        function FallingStar() {
          Star.call(this);
          this.y = Math.random() * canvas.height / 2;
          this.falling = false;
        }

        function setShape(p) {
          var o = p.o;
          cx.save();
          cx.beginPath();
          cx.translate(o.x, o.y);
          cx.rotate(o.rp);
          o.rp += o.rd * 0.01;
          cx.moveTo(0, 0 - o.r);
          for (var i = 0; i < 5; i++) {
            cx.rotate(R);
            cx.lineTo(0, 0 - o.r * o.c);
            cx.rotate(R);
            cx.lineTo(0, 0 - o.r);
          }
        }

        function drawShape() {
          cx.stroke();
          cx.fill();
          cx.restore();
        }

        Star.prototype.shine = function() {
          this.d ? this.e -= ENERGY : this.e += ENERGY;
          if (this.e > 1 - ENERGY && this.d == false) {
            this.d = true;
          }
          setShape({
            o: this
          });
          cx.strokeStyle = "rgba(255, 224, 89, " + this.e + ")";
          cx.shadowColor = "rgba(255, 224, 89, " + this.e + ")";
          cx.fillStyle = "rgba(255, 224, 89, " + this.e + ")";
          cx.lineWidth = this.c * 2;
          cx.shadowBlur = this.r / SIZE;
          cx.shadowOffsetX = 0;
          cx.shadowOffsetY = 0;
          drawShape();
        };

        FallingStar.prototype.shine = function() {
          this.d ? this.e -= ENERGY * 0.2 : this.e += ENERGY * 5;
          if (this.e > 1 - ENERGY && this.d == false) {
            this.d = true;
          }
          setShape({
            o: this
          });
          cx.strokeStyle = "rgba(221, 19, 255, " + this.e * 2 + ")";
          cx.shadowColor = "rgba(221, 19, 255, " + this.e * 2 + ")";
          cx.fillStyle = "rgba(221, 19, 255, " + this.e * 2 + ")";
          cx.lineWidth = this.c * 2;
          cx.shadowBlur = 50;
          cx.shadowOffsetX = 0;
          cx.shadowOffsetY = 0;
          drawShape();
        };

        FallingStar.prototype.fall = function() {
          this.e -= ENERGY * 0.5;
          this.r -= this.r * ENERGY;
          cx.save();
          cx.translate(this.x + this.vx, this.y + this.vy);
          cx.scale(1, Math.pow(this.e, 2));
          cx.beginPath();
          cx.rotate(this.rp);
          this.rp += Math.pow(this.rd, 2);
          cx.moveTo(0, 0 - this.r);
          for (var i = 0; i < 5; i++) {
            cx.rotate(R);
            cx.lineTo(0, 0 - this.r * this.c);
            cx.rotate(R);
            cx.lineTo(0, 0 - this.r);
          }
          this.vx += this.vx;
          this.vy += (this.vy * G);
          cx.strokeStyle = "rgba(255, 210, 93, " + 1 / this.e + ")";
          cx.shadowColor = "rgba(255, 210, 93, " + 1 / this.e + ")";
          cx.fillStyle = "rgba(255, 210, 93, " + 1 / this.e + ")";
          cx.shadowBlur = 200;
          drawShape();
        };

        function redrawWorld() {
          resizeViewport();
          cx.clearRect(0, 0, canvas.width, canvas.height);
          if (regular_stars.length < TOTAL) regular_stars.push(new Star);
          for (var i = 0; i < regular_stars.length; i++) {
            regular_stars[i].shine();
            if (regular_stars[i].d == true && regular_stars[i].e < ENERGY) {
              regular_stars.splice(regular_stars[i], 1);
            }
          }
          if (falling_star === undefined && FALLING_CHANCE > Math.random()) {
            falling_star = new FallingStar;
          }
          if (falling_star !== undefined) {
            falling_star.falling ? falling_star.fall() : falling_star.shine();
            if (falling_star.e < ENERGY) {
              falling_star = undefined;
            }
          }
          requestAnimationFrame(redrawWorld, canvas);
        }

        function resizeViewport() {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
        }

        function mouseMove(e) {
          if (falling_star !== undefined) {
            if (e.clientX > falling_star.x - falling_star.r && e.clientX < falling_star.x + falling_star.r && e.clientY > falling_star.y - falling_star.r && e.clientY < falling_star.y + falling_star.r) {
              if (!falling_star.falling) {
                falling_star.falling = true;
                falling_star.e = 1;
                falling_star.r *= 2;
                falling_star.vy = 0.001;
                if (e.clientX > canvas.width / 2) {
                  falling_star.vx = -(Math.random() * .05 + .05);
                } else {
                  falling_star.vx = Math.random() * .05 + .05;
                }
              }
            }
          }
        }

        document.addEventListener('resize', resizeViewport, false);
        canvas.addEventListener('mousemove', mouseMove, false);
        canvas.addEventListener("touchstart", mouseMove, false)
        redrawWorld();

      })();
    },
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    async initData() {
      const returnData = await initializationLogin({})
      if (returnData._result) {
        this.encryptedString = returnData.data
        this.url = '/api/oceanside-send-and-check/code/send/pictureCode/' + this.encryptedString
      }
      let returnList = await getLoginAgreement({dictType: 'LOGIN'})
      if (returnList._result) {
        if (returnList.data) {
          this.loginAgreementList = returnList.data;
        }
      }
    },
    showAgreementDetail(obj) {
      this.title = obj.title;
      this.agreementHtml = obj.content;
      this.showContentDialog = true;
    },
    handleLogin() {
      this.$refs.loginForm.validate(async valid => {
        if (valid && this.loginForm.agree) {
          this.loading = true;
          const t = await bossLogin({
            loginname: this.loginForm.username,
            password: this.loginForm.password,
            uid: this.encryptedString,
            imgCode: this.loginForm.verificationCode
          })
          if (t._result) {
            localStorage.setItem('router', JSON.stringify(t.data.menuList))
            localStorage.setItem('permission', JSON.stringify(t.data.permissionList))
            localStorage.setItem('image', t.data.setting.IMG_READ_URL)
            localStorage.setItem('roleChar', t.data.roleChar)

            if (t.data.noticeList && t.data.noticeList.length > 0) {
              localStorage.setItem('noticeList', JSON.stringify(t.data.noticeList))
            } else {
              localStorage.setItem('noticeList', JSON.stringify([]))
            }

            let item = {};
            //判断主题是否在节日时间点内
            if (!this.themeInTime) {
              //如果数据库查询到主题 直接覆盖缓存中的主题
              if (t.data.theme) {
                item = JSON.parse(t.data.theme);//数据库内存储的值
              } else {
                window.name = 'isFirstVisit';
              }
            } else {
              item = JSON.parse(localStorage.getItem('theme'));
            }
            let normalBg = document.body.style.getPropertyValue('--normalBg').trim();//APP.vue中存储的主题色
            if (item.normalBg != normalBg) {
              window.name = 'login';
              this.$store.dispatch('app/setSidebarBgColor', item.normalBg);
              this.$store.dispatch('app/setTableBgColor', item.lBg);
              localStorage.setItem('theme', t.data.theme);
              window.onload = function () {
                // 设置值
                document.body.style.setProperty("--normalBg", item.normalBg);
                document.body.style.setProperty("--lightBg", item.lightBg);
                document.body.style.setProperty("--hoverBg", item.hoverBg);
                document.body.style.setProperty("--lbBg", item.lbBg);
                document.body.style.setProperty("--lBg", item.lBg);
                document.body.style.setProperty("--primary", item.normalBg);
                document.body.style.setProperty("--primaryActive", item.lightBg);
                document.body.style.setProperty("--primaryHover", item.hoverBg);
                document.body.style.setProperty("--primaryHoverBg", item.lbBg);
                document.body.style.setProperty("--success", "#25C547");
                document.body.style.setProperty("--successActive", "#25C540");
                document.body.style.setProperty("--successHover", "#6EDC91");
                document.body.style.setProperty("--successHoverBg", "#E8F9EB");
                document.body.style.setProperty("--warning", "#FCA00C");
                document.body.style.setProperty("--warningActive", "#F19B1A");
                document.body.style.setProperty("--warningHoverBg", "#F9F5EF");
                document.body.style.setProperty("--info", "#CACACA");
                document.body.style.setProperty("--infoActive", "#C0C0C0");
                document.body.style.setProperty("--infoHoverBg", "#F8F8F8");
                document.body.style.setProperty("--danger", "#DD1B1B");
                document.body.style.setProperty("--dangerActive", "#D51B1B");
                document.body.style.setProperty("--dangerHoverBg", "#FCEBEB");
              }
            }
            this.$store.dispatch('user/Login', t.data).then(async () => {
              this.loading = false
              if (t.data.roleChar == 'DAILI_ADMIN') {
                let res = await getAgentAgreement({})
                if (res._result) {
                  if (res.data && res.data.length > 0) {
                    this.$store.dispatch('user/NeedToSignAgreement', false).then(() => {
                      this.loading = false;
                      localStorage.setItem('signStatus', false);
                      this.$router.push({path: '/agentSignAgreement'})
                    }).catch(() => {
                      this.loading = false
                    })
                  } else {
                    localStorage.setItem('signStatus', true);
                    this.loading = false
                    this.$router.push({path: '/'})
                  }
                }
              } else {
                localStorage.setItem('signStatus', true);
                this.loading = false
                this.$router.push({path: '/'})
              }
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.loading = false
          }
          this.initData()
        }
      })
    },
    toForgetPassword() {
      this.$router.push({path: '/password-retrieval'})
    },
    clear() {
      this.loginForm.username = '';
      this.loginForm.password = '';
    },
    showBorderLeft(name) {
      let arr = ['userNameBorder', 'passwordBorder', 'codeBorder'];
      for (let i of arr) {
        if (name == i) {
          this[i] = true;
        } else {
          this[i] = false;
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@font-face {
  font-family: icon;
  src: url("/assets/iconfont.ttf");
}

#app {
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
canvas {
  position: absolute;
  z-index: 1;
  background: none !important;
}
h1 {
  position: fixed;
  margin: 0 auto;
  bottom: 1em;
  left: 0;
  right: 0;
  width: 20em;
  text-align: center;
  font-size: 1.2em;
  font-family: 'Indie Flower';
  color: white;
  text-shadow: 0 0 20px black;
  opacity: .8;
  z-index: 2;
  animation: 10s pulse ease-in-out infinite;
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0;
  }
  20% {
    opacity: .8;
  }
  100% {
    opacity: 0;
  }
}
.bg-block {
  width: 1200px;
  height: 600px;
  //position: relative;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  z-index: 160;
}

.loginFormBlock {
  width: 500px;
  height: auto;
  position: fixed;
  left: 60%;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-content: space-between;
  flex-direction: column;
  //background: rgba(255,255,255,0.7);
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.longinTitle {
  width: 100%;
  height: 100px;
  color: #005bea;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  line-height: 100px;
}

.loginFormDom {
  width: 90%;
  height: auto;
  position: relative;
  left: 0;
  top: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
}

.loginFormItem {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #ebebeb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ebebeb;
  font-size: 14px;
}

.loginFormBtn {
  width: 100%;
  height: 150px;
  color: #000b61;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  line-height: 150px;
}

.checkboxStyle {
  color: white;
}

.checkBoxItem {
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  left: 0;
  line-height: 30px;
  margin: 10px 0;
  text-align: left;
}

.agreementItem {
  width: auto;
  padding: 0 5px 0 10px;
  color: cornflowerblue;
  cursor: pointer;
}

.agreementItem:hover {
  font-weight: bold;
  color: white;
}

.login-btn {
  width: 80%;
  height: 50px;
  border: none;
  border-radius: 5px;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  letter-spacing: 10px;
  margin: 50px 10%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/*.login-btn:hover {
  background: linear-gradient(45deg, #0075c3, #000b61);
}*/
> > > .el-input {
  width: 80%;
  background: rgba(255, 255, 255, 0);
}

> > > .el-input--medium .el-input__inner {
  height: 46px;
  line-height: 46px;
  border: none;
}

> > > .el-form-item__error {
  left: 55px;
}

> > > .el-input--medium .el-input__inner {
  height: 46px;
  line-height: 46px;
  background: none;
  border: none;
  color: #fff !important;
  font-size: 20px;
}

> > > input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  background-color: transparent;
  transition: background-color 50000s ease-in-out 0s;
}

> > > input {
  background-color: transparent;
}
</style>
